<template>
  <div class="fr w950">
    <div class="comm_bd mb10 clearfix center_box">
      <div class="center_tt">领取魅力值
        <span class="line"><s class="l_5"></s></span>
      </div>
    <div class="comm_bd clearfix mb20 choose_box">
      <div class="mr20 choose_game fl">
        <p class="fl">选择游戏：</p>
        <div class="box fl">
          <div class="tt">
            <s class="i_sp" style="background-position: 0 -24px;"></s>
            <span value="QQ飞车" class="curBizName">QQ飞车</span>
          </div>
        </div>
      </div>
      <div class="fl clearfix choose_time mr10">
        <p class="fl">查询时间：</p>
        <div class="fl mr10">
          <input type="text" name="date1" class="date datepicker" id="start_date" value="">
          至
          <input type="text" name="date1" class="date datepicker" id="end_date" value="">
        </div>
      </div>
      <div class="fl">
        <a href="#" class="comm_btn btn" title="查询" id="btn_query">查 询</a>
      </div>
    </div>
    <div class="comm_bd coupon_tbl">
      <table width='100%'>
          <thead>
              <tr>
                <th>游戏</th>
                <th>购买时间</th>
                <th>支付价格</th>
                <th>操作</th>
              </tr>
        </thead>
        <tbody id="table_list"><tr><td colspan="4" class="red"><div class="default_con clearfix"><div class="pic"></div><div class="txt"><p class="tt">抱歉，无魅力值记录，您可以在《QQ飞车》道聚城消费，获取魅力值。</p>
        <p>您可以：</p>
        <p>1、进入道聚城首页更多折扣道具等着你，<a href="//daoju.qq.com/mall" target="_blank" class="blue">立即前往&gt;</a></p>
        </div>
        </div>
        </td></tr>
        </tbody>
      </table>
    </div>
    <div class="page" id="page_wrapper"></div>
    <p class="center_tip"><b class="red">温馨提示：</b>飞车魅力值需要在第二天凌晨更新，请耐心等待~</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Rwu10'
}
</script>

<style lang="scss" scoped>
.w950 {
    width: 950px;
.center_box {
    padding: 15px 20px 20px 20px;
    .center_tip {
    padding: 13px 0 0 5px;
    border-top: 1px solid #e6e9ef;
    margin-top: 20px;
}
    .page {
    padding-top: 20px;
    text-align: center;
    height: 38px
}
  .default_con {
    line-height: 24px;
    color: #666;
    width: 540px;
    margin: 0 auto;
    padding: 10px 0;
    text-align: left;
  .tt {
    font-weight: 700;
    font-size: 14px;
    color: #333;
    padding-bottom: 10px;
   }
   .blue, a.blue {
    color: #1994eb;
}
      .pic {
      float: left;
      width: 100px;
      height: 100px;
      background: url(//js02.daoju.qq.com/common/images/emotion.png) no-repeat;
    }
  .txt {
    margin-left: 110px;
    padding-top: 10px;
}
}
      .coupon_tbl td {
        height: 40px;
        text-align: center;
        border-top: 1px solid #e6e9ef;
    }
    .red, a.red {
    color: #f74a4a;
}
    .coupon_tbl th {
    font-weight: 400;
    font-size: 14px;
  }
  .coupon_tbl th, .coupon_tbl td {
    height: 40px;
    text-align: center;
  }
    table {
    border-collapse: collapse;
    border-spacing: 0;
}
  .coupon_tbl {
    padding: 10px 20px;
}
.comm_bd {
    border: 1px solid #e6e9ef;
    background: #fff;
}
  a.btn {
    width: 90px;
    height: 25px;
    line-height: 26px;
    overflow: hidden;
    display: block;
    margin-top: 2px;
 }
 .comm_btn {
    display: inline-block;
    background: #f74a4a;
    color: #fff;
    border-bottom: 2px solid #e43333;
    text-align: center;
    cursor: pointer;
}
    .mr10 {
    margin-right: 10px;
   }
   .choose_time input.date {
    border: 1px solid #e5e5e5;
    padding: 5px 15px;
    line-height: 20px;
    height: 20px;
    width: 80px;
    margin: 0 5px;
}
  .choose_game .box{
    border: 1px solid #e5e5e5;
    padding: 5px 15px;
    line-height: 20px;
    height: 20px;
    width: 120px;
    margin-right: 15px;
    position: relative;
    z-index: 20;
    .tt {
    cursor: pointer;
    }
     s {
    float: right;
    width: 10px;
    height: 7px;
    margin-top: 7px;
    overflow: hidden;
  }
  .i_sp {
    background: url(//js02.daoju.qq.com/common/images/icon.png) no-repeat;
}
    }
      .choose_box {
        padding: 10px 20px;
        line-height: 30px;
    }
    .fl {
    float: left;
}
    .comm_bd {
    border: 1px solid #e6e9ef;
    background: #fff;
    }
    .mb20 {
        margin-bottom: 20px;
    }
    .center_tt {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 20px;
    position: relative;
   .line {
    display: block;
    background: #e6e9ef;
    height: 1px;
    overflow: hidden;
    margin-top: 5px;
      s.l_5 {
        width: 72px;
    }
    s {
    display: block;
    background: #f74a4a;
    height: 1px;
    overflow: hidden;
}
}
}
}
.comm_bd {
    border: 1px solid #e6e9ef;
    background: #fff;
}
.mb10 {
    margin-bottom: 10px;
}
}
.fr {
    float: right;
}
</style>
